<!--
 * @Author: linZeJian
 * @Date: 2022-01-27 15:47:50
 * @LastEditors: linZeJian
 * @LastEditTime: 2022-02-28 11:44:18
 * @Description: 
-->
<template>
  <div id="app" style="width: 100%; height: 100%">
    <router-view :key="routeKey" v-slot="{ Component }">
      <transition name="fade-transform" mode="out-in">
        <!-- keep-alive作用是将组件缓存在内存当中 -->
        <!-- <keep-alive>
          <component :is="Component" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" v-if="!$route.meta.keepAlive" /> -->
        <component :is="Component" />
      </transition>
    </router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, getCurrentInstance } from "vue";
import { useRouter,useRoute } from "vue-router";
// Vue3两种调用路由相关接口的方法
// const instance = getCurrentInstance();
// const $route = instance?.appContext.config.globalProperties.$route;
// const $router = instance?.appContext.config.globalProperties.$router;
// console.log('$route :>> ', $route);
// console.log('$router :>> ', $router);

// const router = useRouter();
// const route = useRoute();
// console.log('router :>> ', router);
// console.log('route', route)
// console.log('route.query', route.query)

const instance = getCurrentInstance();
const $route = instance?.appContext.config.globalProperties.$router;
const routeKey = computed(() => $route.path);
</script>

<style>
@import "@/assets/css/base.css";

/* fade-transform */
.fade-transform-enter-active {
  transition: all 0.5s ease;
}

.fade-transform-enter,
.fade-transform-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

#app {
  /* 限制宽度 fixed的动态js限制 */
  max-width: 1280px;
  margin: 0 auto;
  /* padding: 2rem; */
  font-weight: normal;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}
</style>
